<template>
  <cssModal :visible="visible" :title="title" @cancelModal="close">
    <div class="componyInfo">
      <p>To register your vendor enterprise，please comfirm below information</p>
      <a-form :form="form">
        <a-form-item label="">
          <a-input v-decorator="[ 'corpName', { rules: [{ required: true, message: '请填写公司中文名称!' }], }, ]" style="width: 100%" placeholder="公司中文名称">
            <i class="iconfont icon-yongrendanwei" slot="prefix"></i>
          </a-input>
        </a-form-item>
        <a-form-item label="">
          <a-input v-decorator="[ 'corpNameEn', { rules: [{ required: true, message: 'Please fill in the English name of the company!' }], }, ]" style="width: 100%"  placeholder="Vendor Enterprise English name">
            <i class="iconfont icon-yongrendanwei" slot="prefix"></i>
          </a-input>
        </a-form-item>
        <div class="lang">
          <h4>请选择本企业默认语言</h4>
          <p>Please select preferred language for your company</p>
          <p>
            <a-radio-group v-model="defaultLanguage">
              <a-radio value="zh_CN">中文</a-radio>
              <a-radio value="en">English</a-radio>
            </a-radio-group>
          </p>
        </div>
        <p class="btn">
          <a-button :loading="registerloading" type="primary" @click="cancelModal(true)">注册  Register</a-button>
        </p>
      </a-form>
    </div>
  </cssModal>
</template>

<script>
import cssModal from '@/components/Common/cssModal'
export default {
  name: 'OpeningEnterprises',
  props: ['visible', 'title', 'company', 'registerloading'],
  components: { cssModal },
  data () {
    return {
      form: this.$form.createForm(this),
      defaultLanguage: 'zh_CN'
    }
  },
  watch: {
    visible: {
      handler (newVal, oldVal) {
        if (this.company) {
          this.form.setFieldsValue({ corpName: this.company })
        }
      }
    }
  },
  computed: {
  },
  methods: {
    cancelModal (type) {
      if (type) {
        this.form.validateFields((error, values) => {
          if (!error) {
            this.$emit('cancelModal', { ...values, defaultLanguage: this.defaultLanguage })
          }
        })
      } else {
        this.$emit('cancelModal')
      }
    },
    close () {
      this.$emit('close')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../styles/var.styl'
.componyInfo
  line-height 28px
  padding 12px 24px
  >p
    text-align center
    font-size 12pt
    color registBlue
    margin-bottom 32px
  :global(.ant-input)
    border none
    background f7Grey
    height 44px
    border-radius 44px
    padding 4px 23px 4px 42px
  button
    background btnBlue
    border-radius 30px
    line-height 38px
    height 40px
    border none
    padding 0 64px
  .lang
    margin 24px 0
    text-align center
    line-height 28px
    h4
      font-size 12pt
    p
      font-size 10pt
      color registBlue
  .btn
    text-align center
// .control
//   text-align right
//   line-height 48px
//   padding 24px
//   button
//     background btnBlue
//     border-radius 30px
//     line-height 38px
//     height 40px
//     margin-left 12px
//     border none
</style>
